<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口文档信息</title>
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/vue.js"></script>
    <script src="./assets/js/element.js"></script>
    <link rel="stylesheet" href="./assets/css/element.css">
    <link rel="stylesheet" href="./assets/css/crud.css">
</head>
<body>
<div id="app" style="width:80%; margin:0 auto">
    <h2>接口信息文档</h2>

    <el-form :inline="true" :model="queryForm">
        <el-form-item label="服务名">
            <el-input v-model="queryForm.serviceName"></el-input>
        </el-form-item>
        <el-form-item label="请求地址">
            <el-input v-model="queryForm.uri"></el-input>
        </el-form-item>
        <el-form-item label="请求方式">
            <el-input v-model="queryForm.method"></el-input>
        </el-form-item>
        <el-form-item label="是否包含敏感信息">
            <el-select v-model="queryForm.isSensitive">
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="是否采集">
            <el-select v-model="queryForm.isCollect">
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="loadTable(1)">查询</el-button>
        </el-form-item>
    </el-form>

    <div class="button-container">
        <div style="flex: 1;"></div>
        <el-button type="primary" @click="add">新增</el-button>
    </div>

    <el-table :data="page.list" stripe border style="width: 100%">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="serviceName" label="服务名" width="180"></el-table-column>
        <el-table-column prop="uri" label="接口地址"></el-table-column>
        <el-table-column prop="method" label="请求方式"></el-table-column>
        <el-table-column prop="tags" label="tags"></el-table-column>
        <el-table-column prop="summary" label="summary"></el-table-column>
        <el-table-column prop="apiDescription" label="接口描述"></el-table-column>
        <el-table-column prop="isSensitive" label="是否包含敏感信息">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.isSensitive" @change="changeSwitch(scope.row)" active-color="#409eff"
                           inactive-color="#DCDFE6"></el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="isCollect" label="是否收集">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.isCollect" @change="changeSwitch(scope.row)" active-color="#409eff"
                           inactive-color="#DCDFE6"></el-switch>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" circle
                           @click="del(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100, 200]"
                :current-page="pageNum"
                :total="page.total"
                @prev-click="loadTable"
                @size-change="sizeChange"
                @current-change="loadTable"
                @next-click="loadTable">
        </el-pagination>
    </el-row>

    <el-dialog title="接口信息" :visible.sync="dialogVisible" width="50%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="服务名">
                <el-input v-model="form.serviceName"></el-input>
            </el-form-item>
            <el-form-item label="接口地址">
                <el-input v-model="form.uri"></el-input>
            </el-form-item>
            <el-form-item label="请求方式">
                <el-input v-model="form.method"></el-input>
            </el-form-item>
            <el-form-item label="tags">
                <el-input v-model="form.tags"></el-input>
            </el-form-item>
            <el-form-item label="summary">
                <el-input v-model="form.summary"></el-input>
            </el-form-item>
            <el-form-item label="接口描述">
                <el-input v-model="form.apiDescription"></el-input>
            </el-form-item>
            <el-form-item label="是否包含敏感信息">
                <el-radio v-model="form.isSensitive" :label="true">是</el-radio>
                <el-radio v-model="form.isSensitive" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="是否采集">
                <el-radio v-model="form.isCollect" :label="true">是</el-radio>
                <el-radio v-model="form.isCollect" :label="false">否</el-radio>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            page: {},
            pageNum: 1,
            pageSize: 10,
            dialogVisible: false,
            form: {},
            queryForm: {}
        },

        created() {
            this.loadTable(this.pageNum);
        },

        methods: {
            loadTable(num) {
                this.pageNum = num;
                let pageQuery = {
                    "pageNum": num,
                    "pageSize": this.pageSize,
                    "serviceName": this.queryForm.serviceName,
                    "uri": this.queryForm.uri,
                    "method": this.queryForm.method,
                    "isSensitive": this.queryForm.isSensitive,
                    "isCollect": this.queryForm.isCollect
                }
                $.ajax({
                    url: '/v1/api/info/page',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(pageQuery)
                }).then(res => {
                    this.page = res.result;
                })
            },

            sizeChange(val) {
                this.pageSize = val
                this.loadTable(1)
            },

            add() {
                this.dialogVisible = true;
                this.form = {
                    isSensitive: false,
                    isCollect: true
                };
            },

            edit(row) {
                this.form = row;
                this.dialogVisible = true;
            },

            save() {
                let data = JSON.stringify(this.form);
                if (this.form.id) {
                    $.ajax({
                        url: '/v1/api/info/update',
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        if (res.status === 0) {
                            this.dialogVisible = false;
                            this.loadTable(this.pageNum);
                            this.toast('更新成功', 'success')
                        } else {
                            this.toast('更新失败', 'error')
                        }
                    })
                } else {
                    $.ajax({
                        url: '/v1/api/info/add',
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        if (res.status === 0) {
                            this.dialogVisible = false;
                            this.loadTable(1);
                            this.toast('新增成功', 'success')
                        } else {
                            this.toast('新增失败', 'error')
                        }
                    })
                }
            },

            del(id) {
                $.ajax({
                    url: '/v1/api/info/delete?id=' + id,
                    type: 'post',
                    contentType: 'application/json'
                }).then(res => {
                    if (res.status === 0) {
                        this.loadTable(this.pageNum);
                        this.toast('删除成功', 'success')
                    } else {
                        this.toast('删除失败', 'error')
                    }
                })
            },

            changeSwitch(row) {
                $.ajax({
                    url: '/v1/api/info/update',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(row)
                }).then(res => {
                    this.loadTable(this.pageNum)
                })
            },

            toast(msg, type) {
                this.$message({
                    showClose: true,
                    message: msg,
                    type: type
                });
            }

        }
    })
</script>
</body>
</html>